import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Card, Tabs, DatePicker } from 'antd';
import moment from 'moment';
import { Bar } from '@/components/Charts';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

const { RangePicker } = DatePicker;
const { TabPane } = Tabs;

@connect(({ analysises }) => ({
  analysises,
}))
@Form.create()
class TableList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.getList(1);
    this.getInsList();
    this.getAccuList();
    this.getRcrdList();
  }

  onPaneChange = activeKey => {
    this.getList(activeKey);
  };

  // 时间改变
  timeChange = (fieldsValue, activeKey) => {
    const { dispatch } = this.props;
    if (activeKey) {
      dispatch({
        type: 'analysises/updateModalData',
        payload: { activeKey },
      });
    }
    const formFieldsValue = {};
    Object.keys(fieldsValue).forEach(key => {
      if (key) {
        formFieldsValue.beginTime =
          (fieldsValue[key] && fieldsValue[key][0] && fieldsValue[key][0].format('YYYY-MM')) ||
          null;
        formFieldsValue.endTime =
          (fieldsValue[key] && fieldsValue[key][1] && fieldsValue[key][1].format('YYYY-MM')) ||
          null;
      }
    });
    return formFieldsValue;
  };

  // 查询
  getList = activeKey => {
    const { dispatch, form } = this.props;
    form.validateFields(['dateArr'], (err, fieldsValue) => {
      if (err) return;
      dispatch({
        type: 'analysises/fetchList',
        payload: { ...this.timeChange(fieldsValue, activeKey) },
      });
    });
  };

  getListNew = (data,activeKey) => {
    const { dispatch, form } = this.props;
    form.validateFields(['dateArr'], (err, fieldsValue) => {
      if (err) return;
      dispatch({
        type: 'analysises/fetchList',
        payload: { ...this.timeChange(fieldsValue, activeKey) },
      });
    });
  };


  // 选择月份
  selectMonth = (value, params) => {
    const data = {
      arr: value
    }
    if (params === 'dateArr') {
      this.getListNew(data);
    } else if (params === 'insDate') {
      this.getInsList(data);
    } else if (params === 'accuDate') {
      this.getAccuList(data);
    } else if (params === 'rcrdDate') {
      this.getRcrdList(data);
    }
  };

  // 查询社保列表
  getInsList = (data) => {
    const { dispatch, form } = this.props;
    form.validateFields(['insDate'], (err, fieldsValue) => {
      if (err) return;
      if (data) {
        dispatch({
          type: 'analysises/fetchInsList',
          payload: { ...this.timeChange(data) },
        });
      } else {
        dispatch({
          type: 'analysises/fetchInsList',
          payload: { ...this.timeChange(fieldsValue) },
        });
      }
    });
  };

  // 查询公积金列表
  getAccuList = (data) => {
    const { dispatch, form } = this.props;
    form.validateFields(['accuDate'], (err, fieldsValue) => {
      if (err) return;
      if (data) {
        dispatch({
          type: 'analysises/fetchAccuList',
          payload: { ...this.timeChange(data) },
        });
      } else {
        dispatch({
          type: 'analysises/fetchAccuList',
          payload: { ...this.timeChange(fieldsValue) },
        });
      }
    });
  };

  // 查询档案服务办理列表
  getRcrdList = (data) => {
    const { dispatch, form } = this.props;
    form.validateFields(['rcrdDate'], (err, fieldsValue) => {
      if (err) return;
      if (data) {
        dispatch({
          type: 'analysises/fetchRcrdList',
          payload: { ...this.timeChange(data) },
        });
      } else {
        dispatch({
          type: 'analysises/fetchRcrdList',
          payload: { ...this.timeChange(fieldsValue) },
        });
      }
    });
  };

  // 时间转换
  entryChange = (date, params) => {
    const { form } = this.props;
    form.setFieldsValue({
      [params]: date,
    });
    if (!moment(date[0].valueOf()).format('YYYY-MM-DD HH:mm')) {
      form.setFieldsValue({
        [params]: date,
      });
    }
  };

  render() {
    const { form, analysises } = this.props;
    const { getFieldDecorator } = form;

    return (
      <PageHeaderWrapper>
        <Card style={{ marginBottom: 14 }}>
          <Tabs
            defaultActiveKey="1"
            onChange={this.onPaneChange}
            tabBarExtraContent={
              <Form>
                <Form.Item>
                  {getFieldDecorator('dateArr', {
                    initialValue: analysises.dateArr,
                    rules: [{ required: false }],
                  })(
                    <RangePicker
                      allowClear={false}
                      placeholder={['开始月份', '结束月份']}
                      format="YYYY-MM"
                      // mode={['month', 'month']}
                      picker="month"
                      onPanelChange={date => this.entryChange(date, 'dateArr')}
                      disabledDate={current => current && current > moment().endOf('day')}
                      // showTime
                      onChange={dates => this.selectMonth(dates, 'dateArr')}
                    />
                  )}
                </Form.Item>
              </Form>
            }
          >
            <TabPane tab="入职量" key="1">
              <Bar
                height={200}
                title={
                  <div>
                    入职趋势
                    <p style={{ float: 'right', marginRight: 226 }}>
                      入职办理量：{analysises.entryCount}
                    </p>
                  </div>
                }
                data={analysises.entryList}
              />
            </TabPane>
            <TabPane tab="离职量" key="2">
              <Bar
                height={200}
                title={
                  <div>
                    离职趋势
                    <p style={{ float: 'right', marginRight: 226 }}>
                      离职办理量：{analysises.entryCount}
                    </p>
                  </div>
                }
                data={analysises.entryList}
              />
            </TabPane>
            <TabPane tab="劳动合同签订量" key="3">
              <Bar
                height={200}
                title={
                  <div>
                    劳动合同签订趋势
                    <p style={{ float: 'right', marginRight: 226 }}>
                      劳动合同签订量：{analysises.entryCount}
                    </p>
                  </div>
                }
                data={analysises.entryList}
              />
            </TabPane>
            <TabPane tab="咨询记录" key="4">
              <Bar
                height={200}
                title={
                  <div>
                    咨询趋势
                    <p style={{ float: 'right', marginRight: 226 }}>
                      咨询记录：{analysises.entryCount}
                    </p>
                  </div>
                }
                data={analysises.entryList}
              />
            </TabPane>
          </Tabs>
        </Card>
        <Card
          style={{ marginBottom: 14 }}
          title="社保服务办理"
          extra={
            <Form>
              <Form.Item>
                {getFieldDecorator('insDate', {
                  initialValue: analysises.insDate,
                  rules: [{ required: false }],
                })(
                  <RangePicker
                    allowClear={false}
                    placeholder={['开始月份', '结束月份']}
                    format="YYYY-MM"
                    // mode={['month', 'month']}
                    picker="month"
                    onPanelChange={date => this.entryChange(date, 'insDate')}
                    disabledDate={current => current && current > moment().endOf('day')}
                    // showTime
                    onChange={dates => this.selectMonth(dates, 'insDate')}
                  />
                )}
              </Form.Item>
            </Form>
          }
        >
          <Bar
            height={200}
            title={
              <div>
                办理趋势
                <p style={{ float: 'right', marginRight: 226 }}>
                  办理记录：{analysises.insHandleCount}
                </p>
              </div>
            }
            data={analysises.insHandelList}
          />
        </Card>
        <Card>
          <Row gutter={12}>
            <Col span={12}>
              <Card
                style={{ marginBottom: 14 }}
                title="公积金服务办理"
                bordered={false}
                extra={
                  <Form>
                    <Form.Item>
                      {getFieldDecorator('accuDate', {
                        initialValue: analysises.accuDate,
                        rules: [{ required: false }],
                      })(
                        <RangePicker
                          allowClear={false}
                          placeholder={['开始月份', '结束月份']}
                          format="YYYY-MM"
                          // mode={['month', 'month']}
                          picker="month"
                          onPanelChange={date => this.entryChange(date, 'accuDate')}
                          disabledDate={current => current && current > moment().endOf('day')}
                          // showTime
                          onChange={dates => this.selectMonth(dates, 'accuDate')}
                        />
                      )}
                    </Form.Item>
                  </Form>
                }
              >
                <Bar
                  height={200}
                  title={
                    <div>
                      办理趋势
                      <p style={{ float: 'right', marginRight: 226 }}>
                        办理记录：{analysises.accuHandleCount}
                      </p>
                    </div>
                  }
                  data={analysises.accuHandleList}
                  color="#f69b26"
                />
              </Card>
            </Col>
            <Col span={12}>
              <Card
                style={{ marginBottom: 14 }}
                title="档案服务办理"
                bordered={false}
                extra={
                  <Form>
                    <Form.Item>
                      {getFieldDecorator('rcrdDate', {
                        initialValue: analysises.rcrdDate,
                        rules: [{ required: false }],
                      })(
                        <RangePicker
                          allowClear={false}
                          placeholder={['开始月份', '结束月份']}
                          format="YYYY-MM"
                          // mode={['month', 'month']}
                          picker="month"
                          onPanelChange={date => this.entryChange(date, 'rcrdDate')}
                          disabledDate={current => current && current > moment().endOf('day')}
                          // showTime
                          onChange={dates => this.selectMonth(dates, 'rcrdDate')}
                        />
                      )}
                    </Form.Item>
                  </Form>
                }
              >
                <Bar
                  height={200}
                  title={
                    <div>
                      办理趋势
                      <p style={{ float: 'right', marginRight: 226 }}>
                        办理记录：{analysises.rcrdHandleCount}
                      </p>
                    </div>
                  }
                  data={analysises.rcrdHandleList}
                  color="#04567a"
                />
              </Card>
            </Col>
          </Row>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default TableList;
